<template>
	<view style="padding-top: 140upx;">
		<scroll-view scroll-x="true" class="order-scroll">
			<view class="order-list">
				<view v-for="(item,key) in statusList" :key="key" :class="item.value==status?'order-tab-active':'order-tab'"  @click="switchStatus(item.value)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<view class="list" v-for="(item,key) in orders" :key="key" @click="showOrderDetail(item.id)">
			<view class="list-head">
				
				<view>{{item.buy_time}}</view>
				<view style="color: #FF7465;">{{item.status}}</view>
			</view>
			<view class="list-item" v-for="(v,k) in item.products" :key="k">
				<image class="item-image" :src="v.thumb" mode="aspectFill"></image>
				<view class="item-info">
					<view class="item-title">
						<text>{{v.name}}</text>
						<text v-if="type=='product'" class="weight">{{v.weight}}g</text>
						<text v-else class="weight">{{v.time}}min</text>
						<view style="flex: 1;"></view>
						<text v-if="type=='product'">x{{v.count}}</text>
					</view>
					<text class="item-price">
						￥{{v.price}}
					</text>
				</view>
			</view>
			<view class="item-bottom"> 
				<view class="top-left-dot"></view>
				<view style="color: #4B4B4B;flex: 1;">共{{item.products.length}}{{type=='product'?"件":"项"}}</view>
				<view style="color: #4B4B4B">实付款</view>
				<view style="font-size: 28upx;color: #FF7465;">￥{{item.total_price}}</view>
				<view class="top-right-dot"></view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:3,
				type:"product",
				orders:[],
				statusList:[
					{
						name:"全部",
						value:-1,
					},{
						name:"待服务",
						value:3,
					},{
						name:"待评价",
						value:2,
					},{
						name:"已完成",
						value:1,
					},{
						name:"已取消/退款",
						value:0
					}
				],
			};
		},
		onLoad:function(e){
			this.status=e.status;
			this.type=e.type;
			if(this.type=="product"){
				this.statusList[1].name="待自取"
			}
			
			
		},
		onShow:function(){
			this.getOrderList();
		},
		methods:{
			showOrderDetail:function(id){
				uni.navigateTo({
					url:"/pages/order/detail/detail?type="+this.type+"&id="+id
				})
			},
			
			switchStatus:function(status){
				this.status=status;
				this.getOrderList();
			},
			getOrderList:function(){
				uni.showLoading({
					title:"加载中"
				});
				var that=this;
				that.ajax("/order/orders",{
					token:uni.getStorageSync("token"),
					status:this.status,
					type:this.type
				},function(res){
					that.orders=res.data.data;
				});
				
			}
		}
	}
</script>

<style>
	.list-head{
		font-size: 28upx;
		color: #4B4B4B;
		padding: 28upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1upx dotted #DBDBDB;
		padding: 20upx 0;
		margin-bottom: 20upx;
		position: relative;
	}
	.list-head:before{
		content: '';
		width: 16upx;
		height: 26upx;
		background: #F2F2F2;
		border-top-right-radius: 13upx;
		border-bottom-right-radius: 13upx;
		position: absolute;
		bottom: -13upx;
		left: -20upx;
	}
	.list-head:after{
		content: '';
		position: absolute;
		width: 16upx;
		height: 26upx;
		background: #F2F2F2;
		border-top-left-radius: 13upx;
		border-bottom-left-radius: 13upx;
		bottom: -13upx;
		right: -20upx;
	}
	.order-list{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20upx;
	}
	.order-tab-active{
		margin-right: 20upx;
		color:#45AA8C;
		padding: 6upx 30upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(56,183,154,0.2);
		border-radius:30upx;
		white-space: nowrap;
	}
	.order-tab{
		margin-right: 20upx;
		color: #ABABAB;
		padding: 14upx 30upx;
		white-space: nowrap;
	}
	.nostyle{
		margin: 0;
		padding: 0;
		background: none;
		border:none;
	}
	.nostyle:after{
		border:none;
	}
	.order-scroll{
		background: #fdfdfd;
		position: fixed;
		top: 0;
		z-index: 100;
	}
	.list{
		margin-bottom: 20upx;
		background: #ffffff;
		padding: 0 20upx;
		box-shadow:0upx 4upx 24upx 0upx rgba(43,167,139,0.1);
	}
	.list-title{
		flex: 1;
		font-size: 30upx;
	}
	.list-total{
		font-size: 24upx;
		color: #b6b6b6;
	}
	.list-item{
		padding: 20upx 0;
		position: relative;
	}
	.item-image{
		width: 202upx;
		height: 150upx;
		border-radius: 12upx;
	}
	.item-info{
		flex: 1;
		position: absolute;
		left: 118upx;
		right: 0;
		top: 0upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
		padding-left: 138upx;
		height: 145upx;
		padding-top: 45upx;
	}
	.item-title{
		font-size: 28upx;
		color: #4B4B4B;
		display: flex;
		flex-direction: row;
	}
	.item-cart{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-content: flex-end;
		align-items: flex-end;
	}
	.weight{
		font-size: 20upx;
		line-height: 40upx;
		background: #45AA8C;
		border-radius: 8upx;
		display: inline-block;
		padding: 0 10upx;
		color: #ffffff;
		margin-left: 10upx;
	}
	.item-bottom{
		border-top: 1upx dotted #DBDBDB;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 85upx;
		font-size: 28upx;
		margin-top: 20upx;
		position: relative;
	}
	.top-left-dot{
		width: 16upx;
		height: 26upx;
		background: #F2F2F2;
		border-top-right-radius: 13upx;
		border-bottom-right-radius: 13upx;
		position: absolute;
		top: -13upx;
		left: -20upx;
	}
	.top-right-dot{
		position: absolute;
		width: 16upx;
		height: 26upx;
		background: #F2F2F2;
		border-top-left-radius: 13upx;
		border-bottom-left-radius: 13upx;
		top: -13upx;
		right: -20upx;
	}

	.item-price{
		flex: 1;
		font-size: 28upx;
		color: #4B4B4B;
		margin-top: 50upx;
	}
	.item-count{
		flex: 1;
		text-align: right;
		font-size: 28upx;
		color: #4B4B4B;
	}
</style>
